<template>
    <div id = "menu" v-echo-page page-name="menu"
    v-show = "isShowMenu">
      <menu-layer v-ref:menulayer :menu-items.sync ="menuItems"
      :is-show-sub-menu.sync = "isShowSecondMenu"
      :is-show-menu.sync = "isShowMenu">
      </menu-layer>

      <menu-second id = "menu-second" v-ref:menusecond v-echo-page page-name="menu/*"
      v-show = "isShowSecondMenu" :is-show-second.sync = "isShowSecondMenu">
      </menu-second>
    </div>
</template>

<script>
  import * as MenuLayer from '../components/menu-layer.vue'
  import * as menuSecond from '../components/menu-second.vue'
  import echoMenu from '../utils/echo-menu'
  import * as EchoKey from '../utils/echo-key'
  export default {
    components: {
      MenuLayer,
      menuSecond
    },
    data () {
      return {
        menuItems: echoMenu.menu,
        isShowMenu: false,
        isShowSecondMenu: false
      }
    },
    events: {
      [EchoKey.RIGHT_ENT] (evt) {
        evt.vm = this.$refs.menusecond
        this.$refs.menulayer.$emit(EchoKey.RIGHT_ENT, evt)
      },
      [EchoKey.LEFT] (evt) {
        if (this.isShowSecondMenu) {
          evt.vm = this.$refs.menusecond
        }
        this.$refs.menulayer.$emit(EchoKey.LEFT, evt)
      },
      [EchoKey.UP] (evt) {
        this.$refs.menulayer.$emit(EchoKey.UP, evt)
      },
      [EchoKey.DOWN] (evt) {
        this.$refs.menulayer.$emit(EchoKey.DOWN, evt)
      },
      [EchoKey.MENU_ESC] (evt) {
      },
      [EchoKey.DISP] (evt) {
        this.$echo.routeTo('disp')
      },
      [EchoKey.FUNC] (evt) {
        if (this.isShowSecondMenu) {
          evt.vm = this.$refs.menusecond
        }
        this.$refs.menulayer.$emit(EchoKey.FUNC, evt)
      }
    }
  }
</script>

<style lang = "less">
  #menu {
    display: flex;
    flex-direction: row;
    white-space: nowrap;
    float: left;
    white-space: nowrap;
    width: 450px;

  }
</style>
